<template>
<view class="container">
	<van-tabs v-model="active" @change="onChange" title-inactive-color="#777777" color="#FFFFFF"
	 title-active-color="#FFFFFF" sticky=true>
		<van-tab title="出售中">
			<view class="content-box">
			<!-- 商品列表 -->
				<view class="tis" v-if="goodsList.length==0">暂无商品哦~</view>
				<view class="content" v-else>
					<view class="search-box" @click="toSearch">
						<text class="iconfont icon-sousuo"></text>
						<input type="text" value="" placeholder="搜索我的订单"/>
					</view>
					<view class="goods-list">
						<view class="row" v-for="(row,index) in goodsList" :key="index">
							<!-- 删除按钮 -->
							<view class="menu" @tap.stop="deleteGoods(row.id)">
							<view class="iconfont icon-shanchu"></view>
						</view>
						<!-- 商品 -->
						<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)"
						 @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
							<!-- checkbox -->
							<view class="checkbox-box" @tap="selected(index)">
								<view class="checkbox">
									<view :class="[row.selected?'on':'']"></view>
								</view>
							</view>
							<!-- 商品信息 -->
							<view class="goods-info" @tap="toGoods(row)">
								<view class="img">
									<image :src="row.img"></image>
								</view>
								<view class="info">
									<view class="title">{{row.name}}</view>
								<!-- 	<view class="spec">{{row.spec}}</view> -->
									<view class="spec-box">
										<text>库存：{{row.inventory}}</text>
										<text>销量：{{row.sale}}</text>
									</view>
									<view class="price-number">
										<view class="price">￥{{row.price}}</view>
										<image src="../../static/common/detail.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</van-tab>
		<van-tab title="已售完">
			<view class="content-box">
			<!-- 商品列表 -->
				<view class="tis" v-if="goodsList.length==0">暂无商品哦~</view>
				<view class="content" v-else>
					<view class="search-box" @click="toSearch">
						<text class="iconfont icon-sousuo"></text>
						<input type="text" value="" placeholder="搜索我的订单"/>
					</view>
					<view class="goods-list">
						<view class="row" v-for="(row,index) in goodsList" :key="index">
							<!-- 删除按钮 -->
							<view class="menu" @tap.stop="deleteGoods(row.id)">
							<view class="icon shanchu"></view>
						</view>
						<!-- 商品 -->
						<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)"
						 @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
							<!-- checkbox -->
							<view class="checkbox-box" @tap="selected(index)">
								<view class="checkbox">
									<view :class="[row.selected?'on':'']"></view>
								</view>
							</view>
							<!-- 商品信息 -->
							<view class="goods-info" @tap="toGoods(row)">
								<view class="img">
									<image :src="row.img"></image>
								</view>
								<view class="info">
									<view class="title">{{row.name}}</view>
								<!-- 	<view class="spec">{{row.spec}}</view> -->
									<view class="spec-box">
										<text>库存：{{row.inventory}}</text>
										<text>销量：{{row.sale}}</text>
									</view>
									<view class="price-number">
										<view class="price">￥{{row.price}}</view>
										<image src="../../static/common/detail.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</van-tab>
		<van-tab title="已下架">
			<view class="content-box">
			<!-- 商品列表 -->
				<view class="tis" v-if="goodsList.length==0">暂无商品哦~</view>
				<view class="content" v-else>
					<view class="search-box" @click="toSearch">
						<text class="iconfont icon-sousuo"></text>
						<input type="text" value="" placeholder="搜索我的订单"/>
					</view>
					<view class="goods-list">
						<view class="row" v-for="(row,index) in goodsList" :key="index">
							<!-- 删除按钮 -->
							<view class="menu" @tap.stop="deleteGoods(row.id)">
							<view class="icon shanchu"></view>
						</view>
						<!-- 商品 -->
						<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)"
						 @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
							<!-- checkbox -->
							<view class="checkbox-box" @tap="selected(index)">
								<view class="checkbox">
									<view :class="[row.selected?'on':'']"></view>
								</view>
							</view>
							<!-- 商品信息 -->
							<view class="goods-info" @tap="toGoods(row)">
								<view class="img">
									<image :src="row.img"></image>
								</view>
								<view class="info">
									<view class="title">{{row.name}}</view>
								<!-- 	<view class="spec">{{row.spec}}</view> -->
									<view class="spec-box">
										<text>库存：{{row.inventory}}</text>
										<text>销量：{{row.sale}}</text>
									</view>
									<view class="price-number">
										<view class="price">￥{{row.price}}</view>
										<image src="../../static/common/detail.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</van-tab>
		<van-tab title="已取消">
			<view class="content-box">
			<!-- 商品列表 -->
				<view class="tis" v-if="goodsList.length==0">暂无商品哦~</view>
				<view class="content" v-else>
					<view class="search-box" @click="toSearch">
						<text class="iconfont icon-sousuo"></text>
						<input type="text" value="" placeholder="搜索我的订单"/>
					</view>
					<view class="goods-list">
						<view class="row" v-for="(row,index) in goodsList" :key="index">
							<!-- 删除按钮 -->
							<view class="menu" @tap.stop="deleteGoods(row.id)">
							<view class="icon shanchu"></view>
						</view>
						<!-- 商品 -->
						<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)"
						 @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
							<!-- checkbox -->
							<view class="checkbox-box" @tap="selected(index)">
								<view class="checkbox">
									<view :class="[row.selected?'on':'']"></view>
								</view>
							</view>
							<!-- 商品信息 -->
							<view class="goods-info" @tap="toGoods(row)">
								<view class="img">
									<image :src="row.img"></image>
								</view>
								<view class="info">
									<view class="title">{{row.name}}</view>
								<!-- 	<view class="spec">{{row.spec}}</view> -->
									<view class="spec-box">
										<text>库存：{{row.inventory}}</text>
										<text>销量：{{row.sale}}</text>
									</view>
									<view class="price-number">
										<view class="price">￥{{row.price}}</view>
										<image src="../../static/common/detail.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</van-tab>
	</van-tabs>

	<!-- 脚部菜单 -->
	<view class="footer" :style="{bottom:footerbottom}">
		<view class="checkbox-box" @tap="allSelect">
			<view class="checkbox">
				<view :class="[isAllselected?'on':'']"></view>
			</view>
			<view class="text">全选</view>
		</view>
		
		<view class="btn-box">
			<view class="btn cancel-btn" @tap="cancelSelect">取消</view>
			<view class="btn">批量下架</view>
			<view class="btn" @tap="deleteList">批量删除</view>
		</view>
		<!-- <view class="delBtn" @tap="deleteList" v-if="selectedList.length>0">删除</view>
		<view class="settlement">
			<view class="sum">合计:<view class="money">￥{{sumPrice}}</view>
			</view>
			<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view>
		</view> -->
	</view>
	
</view>
</template>

<script>
import mSearch from '@/components/search/mehaotian-search-revision.vue'; 
export default {
	data() {
		return {
			active: 1,
			sumPrice: '0.00',
			headerPosition: "fixed",
			selectedList: [],
			isAllselected: false,
			goodsList: [{
					id: 1,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				},
				{
					id: 2,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				},
				{
					id: 3,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				},
				{
					id: 4,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				},
				{
					id: 5,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				},
				{
					id: 6,
					img: '/static/common/jiaju-logo.jpeg',
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					inventory:99,
					sale:1999,
					price: 127.5,
					number: 1,
					selected: false
				}
			],
			//控制滑动效果
			theIndex: null,
			oldIndex: null,
			isStop: false
		}
	},
	
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad() {
		//兼容H5下结算条位置
		// #ifdef H5
		this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
		// #endif
		// #ifdef APP-PLUS
		this.showHeader = false;
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
	},
	methods: {
		onChange(event) {
			console.log(event.target.index,999)
		},
		toBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		toSearch(){
			console.log('hhahah')
			uni.navigateTo({
			    url: '/components/search/HM-search'
			});
		},
		//加入商品 参数 goods:商品数据
		joinGoods(goods) {
			/*
			 * 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
			 * 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
			 * 一般商城购物车的增删改动作是由后端来完成的,
			 * 后端记录后返回前端更新前端缓存
			 */
			let len = this.goodsList.length;
			let isFind = false; //是否找到ID一样的商品
			for (let i = 0; i < len; i++) {
				let row = this.goodsList[i];
				if (row.id == goods.id) { //找到商品一样的商品
					this.goodsList[i].number++; //数量自增
					isFind = true; //找到一样的商品
					break; //跳出循环
				}
			}
			if (!isFind) {
				//没有找到一样的商品，新增一行到购物车商品列表头部
				this.goodsList[i].unshift(goods);
			}
		},
		//控制左滑删除效果-begin
		touchStart(index, event) {
			//多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			this.oldIndex = this.theIndex;
			this.theIndex = null;
			//初始坐标
			this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
		},
		touchMove(index, event) {
			//多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			let moveX = event.touches[0].pageX - this.initXY[0];
			let moveY = event.touches[0].pageY - this.initXY[1];

			if (this.isStop || Math.abs(moveX) < 5) {
				return;
			}
			if (Math.abs(moveY) > Math.abs(moveX)) {
				// 竖向滑动-不触发左滑效果
				this.isStop = true;
				return;
			}

			if (moveX < 0) {
				this.theIndex = index;
				this.isStop = true;
			} else if (moveX > 0) {
				if (this.theIndex != null && this.oldIndex == this.theIndex) {
					this.oldIndex = index;
					this.theIndex = null;
					this.isStop = true;
					setTimeout(() => {
						this.oldIndex = null;
					}, 150)
				}
			}
		},
		touchEnd(index, $event) {
			//结束禁止触发效果
			this.isStop = false;
		},
		//控制左滑删除效果-end


		//商品跳转
		toGoods(e) {
			uni.showToast({
				title: '商品' + e.id,
				icon: "none"
			});
			uni.navigateTo({
				url: ''
			});
		},
		//跳转确认订单页面
		toConfirmation() {
			let tmpList = [];
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				if (this.goodsList[i].selected) {
					tmpList.push(this.goodsList[i]);
				}
			}
			if (tmpList.length < 1) {
				uni.showToast({
					title: '请选择商品结算',
					icon: 'none'
				});
				return;
			}
			uni.setStorage({
				key: 'buylist',
				data: tmpList,
				success: () => {
					uni.navigateTo({
						url: ''
					})
				}
			})
		},
		//删除商品
		deleteGoods(id) {
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				if (id == this.goodsList[i].id) {
					this.goodsList.splice(i, 1);
					break;
				}
			}
			this.selectedList.splice(this.selectedList.indexOf(id), 1);
			this.sum();
			this.oldIndex = null;
			this.theIndex = null;
		},
		// 删除商品s
		deleteList() {
			let len = this.selectedList.length;
			while (this.selectedList.length > 0) {
				this.deleteGoods(this.selectedList[0]);
			}
			this.selectedList = [];
			this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length > 0;
			this.sum();
		},
		// 选中商品
		selected(index) {
			this.goodsList[index].selected = this.goodsList[index].selected ? false : true;
			let i = this.selectedList.indexOf(this.goodsList[index].id);
			i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.goodsList[index].id);
			this.isAllselected = this.selectedList.length == this.goodsList.length;
			this.sum();
		},
		//全选
		allSelect() {
			let len = this.goodsList.length;
			let arr = [];
			for (let i = 0; i < len; i++) {
				this.goodsList[i].selected = this.isAllselected ? false : true;
				arr.push(this.goodsList[i].id);
			}
			this.selectedList = this.isAllselected ? [] : arr;
			this.isAllselected = this.isAllselected || this.goodsList.length == 0 ? false : true;
			this.sum();
		},
		// 取消
		cancelSelect() {
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				this.goodsList[i].selected = false;
			}
			this.isAllselected =  false;
			
		},
	
		// 合计
		sum(e, index) {
			this.sumPrice = 0;
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				if (this.goodsList[i].selected) {
					if (e && i == index) {
						this.sumPrice = this.sumPrice + (e.detail.value * this.goodsList[i].price);
					} else {
						this.sumPrice = this.sumPrice + (this.goodsList[i].number * this.goodsList[i].price);
					}
				}
			}
			this.sumPrice = this.sumPrice.toFixed(2);
		},
		


	}
}
</script>
<style lang="less" scoped>
	/deep/.van-tabs__scroll {
		background: #40464D;
	}
	/deep/.van-tabs--line .van-tabs__wrap {
		width: 100vw;
		height: 44px;
		height: var(--tabs-line-height,100rpx);
	}
	/deep/.van-tabs {
		width: 100%;
	}
	
.container {
	height: 100vh;
	background-color: #fff !important;
	// padding-top: 100rpx;
	position: relative;
}
.checkbox-box {
	display: flex;
	align-items: center;
	.checkbox {
		width: 35rpx;
		height: 35rpx;
		border-radius: 100%;
		border: solid 2rpx #0A0605;
		display: flex;
		justify-content: center;
		align-items: center;
		.on {
			width: 35rpx;
			height: 35rpx;
			border-radius: 100%;
			border-radius: 100%;
			
			// background-color: #0A0605;
			background: url(../../static/common/select_icons.png) no-repeat left center;
			background-size: 100% 100%;
			background-color: #000;
		}
	}

	.text {
		font-size: 24rpx;
		margin-left: 10rpx;
	}
}
.content-box {
	width: 100%;
	height:85vh;
	overflow-y: auto;
	padding:24rpx;
 .tis{
	width: 100%;
	height: 60upx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32upx;
	padding-top: 130rpx;
 }

.content {
	// height: 100%;
	// padding: 20rpx 24rpx 0 24rpx;
	.search-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 66rpx;
		background: #F5F5F5;
		border-radius: 34rpx;
		
		input{
			width: 90%;
			height: 100%;
			color: #A0A0A0;
		}
		.icon-sousuo{
			color: #505050;
			margin-left: 28rpx;
		}
	}
	.sort-box {
		padding: 26rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
			width: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.jiantou {
			display: block;
			width: 0;
			height: 0;
			border:10rpx solid transparent;
		}
		.up {
			transform: rotate(180deg);
			border-top-color: #A0A0A0;
		}
		.down {
			// transform: rotate(90deg);
			margin-top: 10rpx;
			border-top-color: #333333;
		}
	}
}




.goods-list {
	width: 100%;
	// padding: 20rpx 0 20rpx 0;
	// border-bottom: 1rpx solid #666;
	.row {
		// width: calc(92%);
		height: calc(22vw + 40rpx);
		margin: 20rpx auto;
		// border-radius: 15rpx;
		// box-shadow: 0rpx 5rpx 20rpx rgba(0, 0, 0, 0.1);
		
		display: flex;
		align-items: center;
		position: relative;
		// overflow: hidden;
		// z-index: 4;
		border-bottom: 1px solid #F5F5F5;
		margin-bottom: 18rpx;
		.menu {
			.icon {
				color: #fff;
			}
			position: absolute;
			width: 30%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: red;
			color: #fff;
			z-index: 2;
		}

		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}

			&.open {
				animation: showMenu 0.25s linear both;
			}

			&.close {
				animation: closeMenu 0.15s linear both;
			}

			background-color: #fff;

			.checkbox-box {
				padding-left: 20rpx;
				flex-shrink: 0;
				height: 22vw;
				margin-right: 20rpx;
			}

			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;
			.goods-info {
				width: 100%;
				display: flex;
				.img {
					width: 22vw;
					height: 22vw;
					border-radius: 10rpx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 10rpx;

					image {
						width: 22vw;
						height: 22vw;
					}
				}
				.info {
					width: 70%;
					height: 22vw;
					padding-left: 10rpx;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;

					.title {
						width: 100%;
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						// text-align: justify;
						overflow: hidden;
					}

					.spec-box {
						padding: 15rpx 0;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20rpx;
						color: #A0A0A0;
						display: flex;
						text:first-child {
								margin-right: 77rpx;
						}
							
						
					}

					.price-number {
						width: 100%;
						font-size: 28rpx;
						height: 36rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20rpx;
						padding: 20rpx 0;
						color: #DBA954;
						display: flex;
						align-items: center;
						justify-content: space-between;
						image {
							width: 52rpx;
							 height: 52rpx;
						}
					}
				}
			}
		}
	}
}

}
.footer {
	width: 100%;
	padding: 0 4%;
	// box-shadow: 0rpx 0rpx 16rpx rgba(219, 169, 84, 0.06);
	box-shadow: 0rpx 5rpx 20rpx rgba(0, 0, 0, 0.1);
	 // border-top: 1rpx solid #666;
	background-color: #fff;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	position: fixed;
	bottom: 0rpx;
	z-index: 5;
	.btn-box {
		width: 68%;
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
	.btn {
		display: flex;
		justify-content:center;
		align-items: center;
		width: 156rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 2rpx solid #DBA954;
		opacity: 1;
		border-radius: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DBA954;
	}
	.cancel-btn {
		width: 112rpx;
		color: #505050;
		border: 2rpx solid #505050;
	}

	.delBtn {
		border: solid 1rpx #f06c7a;
		color: #f06c7a;
		padding: 0 30rpx;
		height: 50rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.settlement {
		width: 60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.sum {
			width: 50%;
			font-size: 28rpx;
			margin-right: 10rpx;
			display: flex;
			justify-content: flex-end;

			.money {
				font-weight: 600;
			}
		}

		.btn {
			padding: 0 30rpx;
			height: 50rpx;
			background-color: #f06c7a;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			border-radius: 30rpx;
		}
	}
}
</style>
